<template>
  <view class="wrap">
    <view class="notice_bar">
      依据国家相关法律要求，互联网就医实行实名制，为保证顺利享受健康服务，请填写真实信息
    </view>
    <view class="list">
      <view class="item">
        <view class="item-title">真实姓名</view>
        <input
          class="input"
          type="text"
          v-model="state.name"
          placeholder="请输入真实姓名"
          placeholder-style="color: #999;font-size: 30rpx;"
        />
      </view>
      <view class="item">
        <view class="item-title">证件类型</view>
        <view class="right" @tap="authenticationFun">
          <text class="name">{{ state.authenticationName }}</text>
          <img class="img" src="@/static/image/hmm/4.png" alt="" />
        </view>
      </view>
      <view class="item">
        <view class="item-title">证件号</view>
        <input
          class="input"
          :type="state.cardType === '居民身份证' ? 'idcard' : 'text'"
          v-model="state.idCard"
          placeholder="认证后将无法修改，请谨慎填写"
          placeholder-style="color: #999;font-size: 30rpx;"
        />
      </view>
      <view v-if="state.authenticationName !== '居民身份证'" class="item">
        <view class="item-title">性别</view>
        <radio-group @change="groupChange" class="radio_group">
          <view class="radio_btn" style="margin-right: 32rpx;">
            <radio :checked="state.sex == '男性'" color="#00d1b6" value="男性"> </radio>
            <text>男性</text>
          </view>
          <view class="radio_btn">
            <radio :checked="state.sex == '女性'" color="#00d1b6" value="女性"> </radio>
            <text>女性</text>
          </view>
        </radio-group>
      </view>
      <view v-if="state.authenticationName !== '居民身份证'" class="item">
        <view class="item-title">出生年月</view>
        <picker
            mode="date"
            :end="formatDate(new Date(), 'yyyy-MM-dd')"
            :start="'1920-01-01'"
            :value="initDate"
            @change="setBirth"
          >
          <view class="right">
            <text class="name">{{ state.birthday }}</text>
            <img class="img" src="@/static/image/hmm/4.png" alt="" />
          </view>
        </picker>
      </view>
      <!-- <view class="item">
        <view class="item-title">手机号</view>
        <input
          class="input inputTel"
          type="number"
          disabled
          :value="stars(state.tel)"
          placeholder="请输入真实手机号"
          placeholder-style="color: #999;font-size: 30rpx;"
        />
      </view> -->
    </view>
    <view class="authenticationBtn">
      <view class="wraps">
        <view class="cancel" @tap="cancel">取消</view>
        <view class="goAuthentication" @tap="sure">去实名认证</view>
      </view>
    </view>
    <up-popup
      :show="state.authenticationWayShow"
      :round="16"
      mode="bottom"
      closeable
      @close="state.authenticationWayShow = false"
    >
      <view class="title">选择认证方式</view>
      <view class="lists">
        <view
          v-for="(item, index) in state.authenticationList"
          :key="index"
          class="item"
          @tap="selectClick(item)"
        >
          {{ item.name }}
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { realAuth, sendPhoneCode } from '@/api/login/index'
import { base_info } from '@/api/moreMessage'
import store from '@/store'
import { onLoad, onHide, onShow } from '@dcloudio/uni-app'
import { validatorIdcard } from '@/utils/tools'
import { formatDate } from '@/utils/util'

const state = reactive({
  authenticationWayShow: false,
  //   authenticationId: '',
  //   authenticationName: '',
  //   默认身份证
  authenticationId: '1',
  authenticationName: '居民身份证',
  authenticationList: [
    {
      name: '居民身份证',
      id: '01'
    },
    // {
    //   name: '选项三',
    //   id: '3'
    // }
    {
      name: '护照',
      id: '03'
    }
  ],
  name: '',
  idCard: '',
  isReadOnly: true,
  tel: '',
  sex: '',
  birthday: '',
  code: '',
  timeQuestions: null,
  isClick: true,
  time: '',
  showPopover: true,
})
const initDate = ref(formatDate(new Date('2000-01-01'), 'yyyy-MM-dd'))

const userInfo = ref({})

onLoad(() => {
  init()
})

onHide(() => {
  clearInterval(state.timeQuestions)
  state.timeQuestions = null
  state.isClick = true
})
const init = () => {
  state.tel = store.state.userInfo.phone || ''
  userInfo.value = store.state.userInfo
}

const stars = (val) => {
  return val.slice(0, 3) + '****' + val.slice(7)
}

const selectClick = (item) => {
  state.authenticationWayShow = false
  state.authenticationName = item.name
  state.authenticationId = item.id
}

const authenticationFun = () => {
  state.authenticationWayShow = true
}

const cancel = () => {
  uni.reLaunch({
    url: '/pages/login/index'
  })
}
const groupChange = (e) => {
  state.sex = e.detail.value
}
const setBirth = (e) => {
  state.birthday = e.detail.value
}

const sure = () => {
  let reg = /^[a-zA-Z0-9]{9}$/
  if (!state.name || !state.tel || !state.idCard || !state.authenticationId) {
    uni.showToast({
      title: '请完善实名认证信息',
      icon: 'none',
      position: 'top',
      //显示持续时间为 2秒
      duration: 2000
    })
    return false
  }
  if (!validatorIdcard(state.idCard) && state.authenticationName === '居民身份证') {
    uni.showToast({
      title: '请输入正确身份证号码',
      icon: 'none',
      position: 'top',
      //显示持续时间为 2秒
      duration: 2000
    })
    return false
  }
  if (state.authenticationName !== '居民身份证' && reg.test(state.idCard) === false) {
    uni.showToast({
      title: '请输入正确证件号',
      icon: 'none',
      position: 'top',
      duration: 2000
    })
    return
  }
  if (state.authenticationName !== '居民身份证' && !state.sex) {
    uni.showToast({
      title: '请完善实名认证信息',
      icon: 'none',
      position: 'top',
      duration: 2000
    })
    return
  }
  if (state.authenticationName !== '居民身份证' && !state.birthday) {
    uni.showToast({
      title: '请完善实名认证信息',
      icon: 'none',
      position: 'top',
      duration: 2000
    })
    return
  }
  userInfo.value.idType = state.authenticationName
  userInfo.value.idNo = state.idCard
  userInfo.value.userName = state.name
  userInfo.value.phone = state.tel
  if (state.authenticationName !== '居民身份证') {
    userInfo.value.gender = state.sex
    userInfo.value.birthday = state.birthday
  }
  let params = {
    ...userInfo.value
  }
  uni.showLoading({
    title: '实名认证中...'
  })
  realAuth(params).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      userInfo.value = res.data
      let params = {
        userId: res.data.userId,
        empi: res.data.empi
      }
      base_info(params).then((ret) => {
        userInfo.value.patientInfo = ret.data
        store.commit('SET_USERINFO', userInfo.value)
        // uni.setStorageSync('userInfo', JSON.stringify(res.data))
        uni.showToast({
          title: '认证成功!',
          icon: 'success',
          duration: 2000,
          complete: (res) => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }
        })
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.wrap {
  .notice_bar {
    font-size: 28rpx;
    color: #ff7d00;
    padding: 16rpx 32rpx;
    background: #fff7e8;
  }
  .list {
    margin: 24rpx 32rpx;
    background: #fff;
    border-radius: 16rpx;
    .item {
      display: flex;
      margin: 0 32rpx;
      position: relative;
      font-size: 30rpx;
      color: #222;
      border-bottom: 1rpx solid #e5e6eb;
      &:nth-last-child(1) {
        border: 0;
      }
      .item-title {
        height: 108rpx;
        line-height: 108rpx;
        font-weight: 700;
        display: inline-block;
      }
      .right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        height: 108rpx;
        line-height: 108rpx;
        min-width: 150rpx;
        text-align: right;
        .name {
          display: inline-block;
          vertical-align: middle;
          padding-left: 20rpx;
        }
        .img {
          display: inline-block;
          vertical-align: middle;
          width: 40rpx;
          height: 40rpx;
        }
      }
      .radio_group {
        width: calc(100% - 70rpx);
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .input {
        box-sizing: border-box;
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        height: 108rpx;
        line-height: 108rpx;
        width: calc(100% - 100rpx);
        text-align: right;
        &.inputTel {
          color: #999;
        }
      }
      .pop_input {
        padding-right: 40rpx;
      }
      .img_more {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        right: 0;
        top: 34rpx;
      }
      // 单选框样式
      ::v-deep .u-radio-group {
        justify-content: flex-end;
        gap: 24rpx;
        .u-radio__icon-wrap {
          width: 40rpx !important;
          height: 40rpx !important;
        }
        .u-icon__icon {
          font-size: 28rpx !important;
        }
        .u-radio__text {
          font-size: 28rpx !important;
          color: #222 !important;
        }
      }
    }
  }
  .authenticationBtn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    .wraps {
      padding: 0 32rpx;
      padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
      padding-top: 24rpx;
      text-align: center;
      font-size: 32rpx;
      color: #666;
      .cancel {
        width: calc(50% - 20rpx);
        display: inline-block;
        vertical-align: middle;
        margin-right: 24rpx;
        border: 1rpx solid #cfcfcf;
        transform: rotateZ(360deg);
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
      }
      .goAuthentication {
        width: calc(50% - 20rpx);
        display: inline-block;
        vertical-align: middle;
        border: 1px solid #00d1b6;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
        background: #00d1b6;
        font-weight: bold;
        color: #fff;
      }
    }
  }
  .u-popup {
    .title {
      height: 108rpx;
      line-height: 108rpx;
      text-align: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      border-bottom: 1rpx solid #e5e6eb;
    }
    .lists {
      padding: 32rpx;
      .item {
        height: 96rpx;
        line-height: 96rpx;
        box-sizing: border-box;
        border-radius: 8rpx;
        background: #fafafa;
        text-align: center;
        padding: 0 32rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #222222;
        margin-bottom: 24rpx;
      }
      .item:last-child {
        margin-bottom: 0;
      }
    }
  }
  ::v-deep .u-datetime-picker {
    display: none;
  }
  ::v-deep .uicon-close {
    font-size: 32rpx !important;
    line-height: 32rpx !important;
  }
}
</style>
